<header class="myheader">
    <div class="top">
        <!--头像左边部分-->
        <div class="top-left">
            {# logo #}
            <div class="logo">
                <a href="{% url 'blog:index' %}">
                    <img src="{% if '/static/' in website_logo %} {{ website_logo }} {% else %}
                        {{ MEDIA_URL }}{{ website_logo }} {% endif %}" alt="logo"/>
                </a>
            </div>
            {# 滚动信息 #}
            <div class="web-xiaoxi">
                <i class="el-speaker"></i>
                <ul class="mulitline">
                    {% for announcement in head_announcement_list %}
                        <li>{{ announcement.head_announcement }}</li>
                    {% empty %}
                        <li>热烈欢迎浏览本站</li>
                    {% endfor %}
                </ul>
            </div>
            <!--手机菜单按钮-->
            <div class="mobile-nav"><i class="el-lines"></i><i class="el-remove"></i></div>
        </div>
        <!--电脑导航开始-->
        <nav class="mynav">
            <ul class="orange-text">
                <li>
                    <a href="{% url 'blog:index' %}">首页</a>
                </li>
                <li>
                    <a href="{% url 'blog:list' %}">博客</a>
                </li>
                <li class='drop'>
                    <a href="JavaScript:;">分类<i class='el-chevron-down'></i></a>
                    <div class="drop-nav orange-text">
                        <ul>
                            {% for category in category_list %}
                                <li>
                                    <a href="{% url 'blog:category' name=category.name %}">{{ category.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </li>
                <li><a href="{% url 'blog:archive' %}">归档</a></li>
                <li><a href="{% url 'blog:about' %}">关于</a></li>
                {% if request.user.username %}
                    {# 个人信息 #}
                    <li class='drop_user'
                        style="float: right; text-overflow:ellipsis; white-space:nowrap; overflow:visible;">
                        <a href="JavaScript:;"><i class="el el-user"></i>{{ request.user.username }}</a>
                        <div class="drop_user-nav orange-text">
                            <ul>
                                <li><a href='{% url 'blog:edit_user' request.user.id %}'>个人信息</a></li>
                                <li><a href="#" onclick="user_delete()">注销用户</a></li>
                                <li><a href="{% url 'blog:logout' %}">退出登录</a></li>
                            </ul>
                        </div>
                        {# 注销 #}
                        <form style="display:none;" action="{% url 'blog:delete' request.user.id %}"
                              method="POST">
                            {% csrf_token %}
                            <button id="user_delete" type="submit">注销</button>
                        </form>
                    </li>
                {% else %}
                    {# 如果用户未登录，则显示 “登录,注册” #}
                    <div class="user">
                        <ul>
                            <li class="nav-item" style="float: right">
                                <a href="{% url 'blog:register' %}"
                                   style="color: #fff;
                               background-color: #0cabd3;
                               border: 1px solid transparent;
                               padding: .375rem .75rem;
                               margin-left: -10px;">注册
                                </a>
                            </li>
                            <li class="nav-item" style="float: right">
                                <a href="{% url 'blog:login' %}"
                                   style="border: 1px solid transparent;
                               padding: .375rem .75rem;
                               border-color: #0cabd3;
                               margin-right: -10px;">登录
                                </a>
                            </li>
                        </ul>
                    </div>
                {% endif %}
            </ul>
        </nav>
        <!--这里是手机导航-->
        <div class="mob-menu">
            <!--手机顶部搜索-->
            <div class="search ">
                <form action="{% url 'blog:search' %}" method="get">
                    <div class="search-index">
                        <label>
                            <input name="key" type="text" placeholder="请输入关键字..." onfocus="this.placeholder=''"
                                   onblur="this.placeholder='请输入关键字...'"/>
                        </label>
                        <i class="el-search"><input value=" " type="submit"/></i>
                    </div>
                </form>
            </div>
            <!--手机下拉菜单-->
            <ul class='mob_header'>
                <li><a href="{% url 'blog:index' %}">首页</a></li>
                <li><a href="{% url 'blog:list' %}">博客</a></li>
                <li class='mob-drop'>
                    <a href="JavaScript:;">分类</a>
                    <ul class="mob-dropmenu">
                        {% for category in category_list %}
                            <li>
                                <a href="{% url 'blog:category' name=category.name %}">{{ category.name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
                <li><a href="{% url 'blog:archive' %}">归档</a></li>
                <li><a href="{% url 'blog:about' %}">关于</a></li>
                {% if request.user.username %}
                    {# 个人信息 #}
                    <li class='drop_user'>
                        <a href="JavaScript:;"><i class="el el-user"></i>{{ request.user.username }}</a>
                        <div class="drop_user-nav orange-text">
                            <ul>
                                <li><a href='{% url 'blog:edit_user' request.user.id %}'>个人信息</a></li>
                                <li><a href="#" onclick="user_delete()">注销用户</a></li>
                                <li><a href="{% url 'blog:logout' %}">退出登录</a></li>
                            </ul>
                        </div>
                        {# 注销 #}
                        <form style="display:none;" action="{% url 'blog:delete' request.user.id %}"
                              method="POST">
                            {% csrf_token %}
                            <button id="user_delete" type="submit">注销</button>
                        </form>
                    </li>
                {% else %}
                    {# 如果用户未登录，则显示 “登录,注册” #}
                    <li class="nav-item">
                        <a style="color: #0C0C0C" href="{% url 'blog:register' %}">注册</a>
                    </li>
                    <li class=" nav-item">
                        <a style="color: #0C0C0C" href="{% url 'blog:login' %}">登录</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>

    <!--换肤--->
    <script src="/static/js/skin.js"></script>
    <div class="select-skin">
        <div class="skin-btn">
            <a href="javascript:void(0);" class="skin-btn-open">换<br>肤</a>
        </div>
        <div class="skin-content">
            <h1>选择风格<span class="skin-close">关闭</span></h1>
            <aside class="skin-content-list">
                <div class="skin-list">
                    <a href="#" onclick="setActiveStyleSheet('qingxin'); return false;" class="btn1">清新</a>
                </div>
                <div class="skin-list">
                    <a href="#" onclick="setActiveStyleSheet('jianyue'); return false;" class="btn2">简约</a>
                </div>
                <div class="skin-list">
                    <a href="#" onclick="setActiveStyleSheet('qingshuang'); return false;" class="btn3">清爽</a>
                </div>
                <div class="skin-list">
                    <a href="#" onclick="setActiveStyleSheet('anhei'); return false;" class="btn4">暗黑</a>
                </div>
            </aside>
        </div>
    </div>
</header>

<script>
    function user_delete() {
        // 调用layer弹窗组件
        layer.open({
            title: "确认注销",
            content: "确认注销用户吗？",
            yes: function (index) {
                layer.msg('注销成功', {icon: 1})
                let sub = document.getElementById("user_delete");
                sub.click()
                layer.close(index);
            },
        })
    }
</script>
